<template>
  <a-form
    ref="formRef"
    :model="formState"
    :label-col="{ span: 2 }"
    autoComplete="off"
    :rules="rules"
    class="xiangmujingyan"
  >
    <a-form-item label="项目名称" name="projectName">
      <a-input
        style="width: 500px"
        size="large"
        v-model:value.trim="formState.projectName"
        placeholder="请输入项目名称"
      />
    </a-form-item>
    <a-form-item label="担任角色">
      <a-input
        style="width: 500px"
        size="large"
        v-model:value="formState.jobTitle"
        placeholder="请输入担任角色"
      />
    </a-form-item>

    <a-form-item label="项目时间" name="onJobTime">
      <a-range-picker
        v-model:value="formState.onJobTime"
        size="large"
        style="width: 500px"
        :placeholder="['请选择项目时间']"
      />
    </a-form-item>

    <a-form-item
      label="项目描述"
      name="description"
      class="show-count no-resize wrapper-textarea"
    >
      <a-textarea
        style="height: 160px; resize: none"
        size="large"
        v-model:value="formState.description"
        placeholder="请输入项目描述"
        :autoSize="false"
        :maxlength="1500"
      />
      <div class="count">
        <span>{{ formState?.description?.length }}</span
        >/1500
      </div>
    </a-form-item>

    <a-form-item
      label="项目业绩"
      name="performance"
      class="show-count no-resize wrapper-textarea"
    >
      <a-textarea
        style="height: 160px; resize: none"
        size="large"
        v-model:value="formState.performance"
        placeholder="请输入项目业绩"
        :autoSize="false"
        :maxlength="1500"
      />
      <div class="count">
        <span>{{ formState?.description?.length }}</span
        >/1500
      </div>
    </a-form-item>

    <a-form-item label="项目链接" name="links">
      <a-input
        style="width: 500px"
        size="large"
        v-model:value="formState.links"
        placeholder="请输入项目链接"
      />
    </a-form-item>

    <a-col :span="24" class="btn-box">
      <a-form-item>
        <a-button size="large" @click="emit('close')">取消</a-button>
        <a-button size="large" type="primary" @click="onhandleSubmit"
          >保存</a-button
        >
      </a-form-item>
    </a-col>
  </a-form>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
 
import { Dayjs } from 'dayjs';
import ResumeService from '@/api/resume';
import { message } from 'ant-design-vue';
import { reg_gb2312_en } from '@/utils/regs';
import dayjs from 'dayjs';
import _ from 'lodash';
const defaultFormState = {
  projectName: null,
  jobTitle: null,
  onJobTime: [] as any,
  description: '',
  performance: '',
  links: '',
  id: null,
};

const props = defineProps<{ value: any }>();
const emit = defineEmits(['finish', 'close']);
const formState = reactive(defaultFormState);
const formRef = ref();
const rules = {
  projectName: {
    required: true,
    trigger: 'change',
    validator: (rule: any, value: any) => {
      if (!value) {
        return Promise.reject(`请填写项目名称`);
      } else {
        if (!reg_gb2312_en().test(value)) {
          return Promise.reject(`请填写项目名称`);
        } else {
          return Promise.resolve();
        }
      }
    },
  },
  jobTitle: {
    required: true,
    trigger: 'change',
    validator: (rule: any, value: any) => {
      if (!value) {
        return Promise.reject(`请填写担任角色`);
      } else {
        if (!reg_gb2312_en().test(value)) {
          return Promise.reject(`请填写担任角色`);
        } else {
          return Promise.resolve();
        }
      }
    },
  },
  onJobTime: {
    required: true,
    trigger: 'change',
    message: '请选择项目时间',
    type: 'array',
    len: 2,
  },
};

const onhandleSubmit = _.debounce((key: any) => {
  onSubmit();
}, 500);

async function onSubmit() {
  try {
    await formRef.value?.validate();
    const api = props.value
      ? ResumeService.editSeekerProjectExperience
      : ResumeService.addSeekerProjectExperience;
    const params: any = { ...formState };
    if (params.onJobTime) {
      params.startTime = (params.onJobTime?.[0] as Dayjs)?.format('YYYY-MM');
      params.endTime = (params.onJobTime?.[1] as Dayjs)?.format('YYYY-MM');
    }
    delete params.onJobTime;

    const resp = await api(params);
    if (resp.code === 200) {
      message.success(`操作成功`);
      emit('finish');
    } else {
      message.error(resp?.msg || '操作失败');
    }
  } catch (error) {
    console.log(error);
  }
}

function initFormData() {
  if (!props.value) return;
  const value = props.value;

  const onJobTime: any = [
    value?.startTime ? dayjs(value.startTime) : null,
    value?.endTime ? dayjs(value.endTime) : null,
  ];

  formState.projectName = value?.projectName;
  formState.onJobTime = onJobTime;
  formState.jobTitle = value?.jobTitle;
  formState.performance = value?.performance;
  formState.description = value?.description;
  formState.links = value?.links;
  formState.id = value.id;
}

onMounted(() => {
  initFormData();
});
</script>

<style lang="less" scoped>
.xiangmujingyan {
  background-color: #f3f3f5;
  padding-top: 24px;
  margin-bottom: 50px;
  padding: 24px 20px 1px 20px;
  .btn-box {
    padding-top: 8px;
  }
}
</style>
